<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: pink;
				position: absolute;
				left: 0;
			}
			
			#box2{
				width: 0;
				height: 1000px;
				border-left: 1px solid black;
				position: absolute;
				top: 0;
				left: 800px;
				
			}
		</style>
		<script>
			
			window.onload = function(){
				var btn01 = document.getElementById("btn01");
				
				var btn02 = document.getElementById("btn02");
			
				var box1 = document.getElementById("box1");
				
			
				
				
				btn01.onclick = function(){
					move(box1, 800, 10);
				};
				
				btn02.onclick = function(){
					move(box1, 0, 10);
				};
			
			};
				var timer;
				
				
				 function move(obj , target , speed){
					
					clearInterval(timer);
					
					var current = parseInt(getStyle(obj,"left"));
						
						if(current > target){
							speed = -speed;
						}
					
					timer = setInterval(function(){
						
						
						
						//获取box1原来的left值
						var oldValue = parseInt(getStyle(obj,"left"));
						
						//在旧值的基础上增加
						var newValue  = oldValue + speed;
						
						
						//判断值是否大于800
						if((newValue <target && speed < 0)  || (speed > 0 && newValue > target)){
							newValue = target;
						}
						//将新值赋值给box1
						obj.style.left = newValue + "px";
						
						//当元素移动到800时，使其停止执行动画
						if(newValue == target){
							clearInterval(timer);
						}
						
					},30);
				
			}
			
			function getStyle(obj , name){
				
				if(window.getComputedStyle){
					return getComputedStyle(obj, null)[name];
				}else{
					return obj.currentStyle[name];
				}
			}
			
		</script>
	</head>
	<body>
		<button id="btn01">点击按钮，box1向右移动</button>
		<button id="btn02">点击按钮，box1向左移动</button>
		<br /><br />
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>
